<template>
	<view style="">
		<view class="" style="position: relative;
			display: flex;
			align-items: center;
			justify-content: center;">
			<view class="top-bg"></view>
			<view class="top-cons">
				<view class="flex-row items-center justify-between " style="padding:20rpx 20rpx 0 20rpx;">
					<view class="flex-row items-center top-city-con">
						<view class="top-city flex-row items-center" @click="navTo('/pages/public/city')">
							<text class="clamp"
								style="font-size: 24rpx;margin-right:8rpx;max-width: 100rpx;">{{ city }}</text>

							<u-icon name="arrow-down-fill" size="20"></u-icon>
						</view>
						<view class="" @click="navTo('/pages/search/index')">

							<u-search :showAction="false" :disabled="true" bgColor="#F4F6F8" placeholder="搜索附近充电站">
							</u-search>
						</view>
					</view>
					<view class="flex-col justify-center items-center" @click="changeStore">
						<view class="">
							<u-icon name="/static/img/dt.png" size="35" color="#246697"></u-icon>
						</view>
						<text style="color: #246697;font-size: 22rpx;">{{ callType == 'map' ? '列表模式' : '地图模式' }}</text>
					</view>
				</view>
				<view class="flex-row items-center justify-between" style="padding-top: 14rpx;">
					<u-dropdown class="fill" titleSize="24" active-color="#246697" menuIconSize="18">
						<u-dropdown-item v-model="distanceSearch" title="距离" :options="options1"
							@change="dropdownChange"></u-dropdown-item>
							
						<u-dropdown-item v-model="type" title="充电桩类型" :options="options2"
							@change="dropdownChange"></u-dropdown-item>
						<u-dropdown-item v-model="lable" title="偏好">
							<view class="slot-content" style="background-color: #FFFFFF;padding: 10rpx 0;">
								<scroll-view scroll-y="true" style="max-height:400rpx;">
									<u-checkbox-group @change="checkboxGroupChange" :wrap="true" icon-size="28"
										size="44">
										<u-checkbox v-for="(item, index) in tagList" :key="index" activeColor="#246697"
											v-model="item.checked" :name="item.content">
											{{ item.content }}
										</u-checkbox>
									</u-checkbox-group>
								</scroll-view>
							</view>
						</u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view v-show="callType != 'map'" style="padding-bottom: 150rpx;">
			<view class="" v-if="dataList.length != 0" style="padding: 20rpx;">
				<item :list="dataList"></item>
			</view>

			<u-empty src="/static/empty.png" marginTop="200" iconSize="200" text="没有数据哦 ^_^" v-else></u-empty>
		</view>
		
		<tabbar :isPages="1"></tabbar>
		
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	import item from '@/components/page-item-list/item.vue';
	export default {
		components: {
			item
		},
		data() {
			return {
				city: '',
				callType: 'list',
				notList: [],
				show: false,
				distanceSearch: '', //  距离
				distanceSearchs: '', //  距离
				options1: [{
						label: '3km',
						value: '3km'
					},
					{
						label: '10km',
						value: '10km'
					},
					{
						label: '50km',
						value: '50km'
					},
					{
						label: '不限',
						value: ''
					}
				],
				type: '', //   充电桩类型
				options2: [{
					label: '全部',
					value: ''
				},{
					label: '汽车快充',
					value: '0'
				},{
					label: '汽车慢充',
					value: '1'
				},{
					label: '电动车',
					value: '2'
				}],
				lable: '', //  标签
				tagList: [], //偏好列表
				point: {
					latitude: 34.79977,
					longitude: 113.66072,
				},
				scale: 5,
				markers: [], //标点列表
				dataList: [], //地图标点经纬
				showAd: false,
				bannerList: [],
				singInList: [],
				power: '',
				powerList: [{
					content: '<30kw',
					value: '0'
				}, {
					content: '60kw',
					value: '1'
				}, {
					content: '120kw',
					value: '2'
				}, {
					content: '>249kw',
					value: '3'
				}],
				voltage: '',
				voltageList: [{
					content: '<30kw',
					value: '0'
				}],
				pageNo: 1,
				last: 1,
				homeUrl: '',
				isHeight: false,
				currentItem: {},
				windowInfo: {},
				isOption:false,
				isOptionIndex:0,
			};
		},
		onLoad() {
			this.city = uni.getStorageSync('city')
			this.listRechargeListFn()
			this.loadTag()
		},
		onShow() {
			
		},
		onReachBottom() {
			if (this.last > this.pageNo) {
				this.pageNo++
				this.listRechargeListFn()
			}
		},
		onPullDownRefresh() {
			this.pageNo = 1
			this.listRechargeListFn()
		},
		methods: {
			handleScreen(index){
				if(this.isOption && this.isOptionIndex != index){
					this.isOptionIndex = index
					return
				}
				this.isOption = !this.isOption
				this.isOptionIndex = index
			},
			set(city) {
				this.city = city
				uni.setStorageSync('city', this.city)
				this.listRechargeListFn(); //接口
			},
			changeStore() {
				this.switchTab('/pages/tabs/nmap')
			},
			dropdownChange(e) {
				this.loadData();
			},
			checkboxGroupChange(e) {
				console.log(e);
				this.lable = e.join(',')
				this.pageNo = 1;
				this.listRechargeListFn()
			},
			radioGroupChange(e) {
				console.log(e);
				this.power = e.detail.value;
				this.pageNo = 1;
				this.listRechargeListFn()
			},
			radioGroupChange1(e) {
				console.log(e);
				this.voltage = this.voltageList[e.detail.value].content;
				this.pageNo = 1;
				console.log(this.voltage);
				this.listRechargeListFn()
			},
			async loadTag() {
				const res = await this.$request('recharge/label-list', {});
				if (res.result == 0) {
					this.tagList = res.data;
				} else {
					this.$util.msg(res.resultNote);
				}
			},
			async listRechargeListFn() {
				let point = uni.getStorageSync('point')
				let data = {
					uid: uni.getStorageSync('uid'),
					longitude: point.longitude,
					latitude: point.latitude,
					city: this.city,
					lable: this.lable,
					power: this.power,
					voltage: this.voltage,
					type: this.type,
					distanceSearch: this.distanceSearch,
					pageNo: this.pageNo,
					pageSize: 10
				}
				let res = await this.$request('recharge/list',data,{showLoading: true})
				uni.stopPullDownRefresh()
				if (res.result == '0') {
					this.last = res.data.last
					if (this.pageNo > 1) {
						this.dataList = this.dataList.concat(res.data.list)
					} else {
						this.dataList = res.data.list
					}
				}else{
					this.$util.mag(res.resultNote)
				}
			},

		},
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		width: 750rpx;
		height: 320rpx;
		background-color: $uni-color-bg;
		margin-bottom: 32rpx;
	}

	.top-bg {
		width: 100%;
		height: 110px;
		background-color: $uni-color-bg;
		// margin-bottom: 32rpx;
	}

	.top-cons {
		width: 707rpx;
		background-color: #ffffff;
		box-shadow: 0px 5rpx 30rpx 0px rgba(112, 112, 112, 0.13);
		z-index: 99;
		border-radius: 20rpx;
		position: absolute;
	}

	.top-city-con {
		width: 570rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx;
		padding: 40rpx 25rpx;
	}

	.map-con {
		width: 750rpx;
		height: 800rpx;
		position: relative;
	}

	.map {
		width: 750rpx;
		height: 800rpx;
	}

	.map-con .top-con {
		width: 700rpx;
		/* height: 187rpx; */
		background-color: #ffffff;
		box-shadow: 0px 5rpx 30rpx 0px rgba(112, 112, 112, 0.13);
		border-radius: 20rpx;
		position: absolute;
		left: 25rpx;
		top: 50rpx;
		z-index: 44;
	}

	/* #ifdef MP-WEIXIN */
	::v-deep .u-cell-item-box {
		flex-direction: column !important;
	}

	/* #endif */

	.bottom-con {
		position: fixed;
		left: 0;
		bottom: 10rpx;
		width: 750rpx;
		padding: 30rpx;
		z-index: 99;
	}

	.item-top {
		padding: 60rpx 30rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		position: relative;
	}

	.close-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.close-icon .image {
		width: 30rpx;
		height: 30rpx;
		/* display: block; */
	}

	.bottom-icon {
		width: 28rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.item-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
	}

	.item-d {
		font-size: 24rpx;
		font-weight: 500;
		color: #a9a9a9;
		padding-top: 30rpx;
	}

	.icon {
		width: 58rpx;
		height: 58rpx;
	}

	.power,
	.voltage {
		padding: 20rpx;
		margin-bottom: 10rpx;
	}

	.power,
	.voltage .title {
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
	}
	
</style>
